<template>
	<view class="container">
		<!-- 顶部用户信息卡片 -->
		<view class="card">
			<!-- 头像 -->
			<view class="avatar-container" @click="handleAvatarClick">
				<image :src="userInfo.avatar || '/static/img/userDefault.png'" class="avatar" mode="aspectFill" />
			</view>

			<!-- 登录状态区域 -->
			<view class="user-status">
				<view v-if="!isLogin" class="not-logged">
					<text style="font-size: 28rpx; color: #666; margin-bottom: 20rpx;">尚未登录</text>
					<button class="login-btn" size="mini" @click="goToLogin">登录</button>
				</view>

				<view v-else class="logged-in">
					<view class="user-info-main">
						<text class="username">{{ userInfo.username }}</text>
						<text class="welcome">欢迎回来！</text>
						<text class="login-time"
							v-if="userInfo.loginTime">最后登录：{{ formatLoginTime(userInfo.loginTime) }}</text>
					</view>
					<button class="logout-btn" size="mini" @click="handleLogout">退出登录</button>
				</view>
			</view>
		</view>

		<!-- 个人中心功能区域 -->
		<view class="card" v-if="isLogin">
			<view class="section-title">个人中心</view>
			<view class="function-list">
				<view class="function-item">
					<text class="function-text">账号信息</text>
					<text class="function-arrow">></text>
				</view>
				<view class="function-item">
					<text class="function-text">我的收藏</text>
					<text class="function-arrow">></text>
				</view>
				<view class="function-item">
					<text class="function-text">设置</text>
					<text class="function-arrow">></text>
				</view>
			</view>
		</view>

		<view class="card" v-else>
			<text class="prompt-text">尚未登入</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {
					username: '',
					avatar: '',
					loginTime: null
				}
			}
		},

		onShow() {
			this.checkLoginStatus();
		},

		methods: {
			// 检查登录状态 - 已适配云端登录系统
			checkLoginStatus() {
				// 从云端登录系统存储结构中获取当前用户信息[7](@ref)
				const currentUser = uni.getStorageSync('currentUser');
				console.log('当前登录用户信息:', currentUser);

				if (currentUser && currentUser.username) {
					// 用户已登录，使用云端登录系统的数据结构[4](@ref)
					this.isLogin = true;
					this.userInfo = {
						username: currentUser.username,
						avatar: currentUser.avatar || '',
						loginTime: currentUser.loginTime || null
					};

					// 更新底部导航栏文本
					uni.setTabBarItem({
						index: 3,
						text: '我的'
					});
				} else {
					// 用户未登录
					this.isLogin = false;
					this.userInfo = {
						username: '',
						avatar: '',
						loginTime: null
					};

					// 未登录时设置tabBar文本为'未登录'
					uni.setTabBarItem({
						index: 3,
						text: '未登录'
					});
				}
			},

			// 处理头像点击
			handleAvatarClick() {
				if (!this.isLogin) {
					this.goToLogin();
					return;
				}
				this.uploadAvatar();
			},

			// 上传头像
			uploadAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						// 更新本地显示
						this.userInfo.avatar = tempFilePath;
						// 保存到存储 - 适配新的存储结构
						this.saveAvatarToStorage(tempFilePath);
					}
				});
			},

			// 保存头像到本地存储 - 已适配新的存储结构
			saveAvatarToStorage(avatarPath) {
				const currentUser = uni.getStorageSync('currentUser');
				if (currentUser && currentUser.username) {
					// 更新当前用户信息的头像
					const updatedUser = {
						...currentUser,
						avatar: avatarPath
					};
					uni.setStorageSync('currentUser', updatedUser);

					// 更新页面数据
					this.userInfo.avatar = avatarPath;

					uni.showToast({
						title: '头像更新成功',
						icon: 'success'
					});
				}
			},

			// 格式化登录时间显示
			formatLoginTime(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},

			// 跳转到登录页面
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},

			// 退出登录 - 已适配云端登录系统
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除云端登录系统的存储结构[4](@ref)
							uni.removeStorageSync('currentUser');

							// 更新页面状态
							this.isLogin = false;
							this.userInfo = {
								username: '',
								avatar: '',
								loginTime: null
							};

							// 更新底部导航栏
							uni.setTabBarItem({
								index: 3,
								text: '未登录'
							});

							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});

						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 30rpx;
	}

	.card {
		background-color: #ffffff;
		padding: 40rpx 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.avatar-container {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 4rpx solid #e0e0e0;
		margin-right: 30rpx;
		flex-shrink: 0;
	}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.user-status {
		flex: 1;
	}

	.not-logged {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.login-btn {
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 16rpx 32rpx;
		font-size: 28rpx;
	}

	.logged-in {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.user-info-main {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.username {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.welcome {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 4rpx;
	}

	.login-time {
		font-size: 24rpx;
		color: #999;
	}

	.logout-btn {
		background-color: #ff3b30;
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 16rpx 24rpx;
		font-size: 28rpx;
		white-space: nowrap;
		margin-left: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.function-list {
		display: flex;
		flex-direction: column;
	}

	.function-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.function-item:last-child {
		border-bottom: none;
	}

	.function-text {
		font-size: 30rpx;
		color: #333;
	}

	.function-arrow {
		font-size: 28rpx;
		color: #999;
	}

	.prompt-text {
		font-size: 28rpx;
		color: #999;
		text-align: center;
		width: 100%;
	}
</style>